<template>
  <div v-loading="loading" :style="'height:' + height">
    <iframe
      id="iframe"
      :src="src"
      style="width: 100%; height: 100%;border: none;"
    />
  </div>
</template>

<script setup>

// 定义 props
const props = defineProps({
  src: {
    type: String,
    required: true
  }
})

// 响应式数据
const height = ref(document.documentElement.clientHeight - 94.5 + 'px;')
const loading = ref(true)
const url = ref(props.src)

// 窗口大小改变处理函数
const handleResize = () => {
  height.value = document.documentElement.clientHeight - 94.5 + 'px;'
}

// 添加 token 方法
const populateIframe = (iframe, headers) => {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', props.src)
  xhr.responseType = 'blob'
  headers.forEach((header) => {
    xhr.setRequestHeader(header[0], header[1])
  })
  xhr.onreadystatechange = () => {
    if (xhr.readyState === xhr.DONE) {
      if (xhr.status === 200) {
        iframe.src = URL.createObjectURL(xhr.response)
      }
    }
  }
  xhr.send()
}

// 生命周期钩子
onMounted(() => {
  // 添加token
  // setTimeout(() => {
  //   const iframe = document.querySelector("#iframe");
  //   populateIframe(iframe, [[store.getters.tokenName ? store.getters.tokenName : 'token', store.getters.token]]);
  // }, 0);

  setTimeout(() => {
    loading.value = false
  }, 300)

  // 添加窗口大小改变监听
  window.addEventListener('resize', handleResize)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>
